<template>
  <div class="home">
    <van-swipe
            vertical
            class="my-swipe"
            :touchable="true"
            @change="onChange"
            :show-indicators="false">
      <van-swipe-item v-for="(item, index) in videoList" :key="index" class="product_swiper">
        <video loop webkit-playsinline="true"
               x5-video-player-type="h5-page"
               x5-video-player-fullscreen="true"
               playsinline
               preload="auto"
               :poster="item.cover"
               :src="item.url"
               playsinline = "true"
               width="100%"
               @click="pauseVideo"></video>
        <img v-show="iconPlayShow" class="icon_play" @click="playvideo"
             src="http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575340653940esdHR.png"/>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
let videoProcessInterval;
export default {
  name: 'Home',
  components: {

  },
  data(){
    let u = navigator.userAgent;
    return{
      current:0,
      playOrPause:true,
      isVideoShow: true,
      iconPlayShow: true,
      videoProcess: 0,//视频播放进度
      isAndroid: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
      isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
      videoList: [{
        url: 'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4',//视频源
        cover: 'http://oss.jishiyoo.com/images/file-1575341210559.png',//封面
        tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',//作者头像
        fabulous: false,//是否赞过
        tagFollow: false,//是否关注过该作者
        author_id: 1,//作者ID
        author:'superKM',
        des:'武汉加油'
      }, {
        url: 'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4',
        cover: 'http://oss.jishiyoo.com/images/file-1575343195934.jpg',
        tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449298299M3V50.jpg',
        fabulous: true,//是否赞过
        tagFollow: false,//是否关注过该作者
        author_id: 2,//作者ID
        author:'superKM',
        des:'中国加油'
      }, {
        url: 'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4',
        cover: 'http://oss.jishiyoo.com/images/file-1575343262684.jpg',
        tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',
        fabulous: false,//是否赞过
        tagFollow: false,//是否关注过该作者
        author_id: 1,//作者ID
        author:'superKM',
        des:'武汉加油'
      }, {
        url: 'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4',
        cover: 'http://oss.jishiyoo.com/images/file-1575343508574.jpg',
        tag_image: 'http://npjy.oss-cn-beijing.aliyuncs.com/images/file-1575449277018pF3XL.jpg',
        fabulous: false,//是否赞过
        tagFollow: false,//是否关注过该作者
        author_id: 1,//作者ID
        author:'superKM',
        des:'中国加油'
      }],
    }
  },
  methods:{
    // 开始播放
    playvideo(event) {
      let video = document.querySelectorAll('video')[this.current];
      console.log("playvideo：" + this.current);
      this.isVideoShow = false;
      this.iconPlayShow = false;
      this.showShareBox = false;
      video.play();
      window.onresize = function () {
        video.style.width = window.innerWidth + "px";
        video.style.height = window.innerHeight + "px";
      }
      videoProcessInterval = setInterval(() => {
        this.changeProcess(video)
      }, 100)
    },
    pauseVideo() { //暂停\播放
      try {
        let video = document.querySelectorAll('video')[this.current];
        console.log("pauseVideo" + this.current);
        if (this.playOrPause) {
          video.pause();
          this.iconPlayShow = true;
          clearInterval(videoProcessInterval)
        } else {
          // wx.ready(() => {
          //     // 在微信的ready中进行播放 不管成功配置与否 都会执行ready
          //     video.play();
          // })
          video.play();
          video.pause();
          setTimeout(()=>{
            video.play();
            this.iconPlayShow = false;
            videoProcessInterval = setInterval(() => {
              this.changeProcess(video)
            }, 100)
          },100)
        }
        this.playOrPause = !this.playOrPause;
        this.showShareBox = false;
      } catch (e) {
        alert(e)
      }


    },
    //滑动改变播放的视频
    onChange(index) {
      //改变的时候 暂停当前播放的视频
      clearInterval(videoProcessInterval)
      this.videoProcess = 0;
      let video = document.querySelectorAll('video')[this.current];
      video.pause();
      this.playOrPause = false;
      this.showShareBox = false;
      this.current = index
      //非ios切换直接自动播放下一个
      if(!this.isiOS){
        this.isVideoShow = false;
        setTimeout(() => {
          this.pauseVideo()
        }, 100)
      }else{
        //ios官方禁止video自动播放，未找到合适的方法，如果您发现了，麻烦告诉我一下谢谢啦
        // this.playOrPause = true;
        // this.iconPlayShow = true;
        document.addEventListener("WeixinJSBridgeReady",function () {
          video.play();
        },false)
      }


    },
    //记录播放进度
    changeProcess() {
      let video = document.querySelectorAll('video')[this.current];
      let currentTime = video.currentTime.toFixed(1);
      let duration = video.duration.toFixed(1);
      this.videoProcess = parseInt((currentTime / duration).toFixed(2) * 100)
    },
    onPlayerEnded(player) { //视频结束
      this.isVideoShow = true
      this.current += this.current
    },
  },
  computed:{

  },
  created(){

  }
}
</script>
<style scoped>
  .van_swipe {
    width: 100vw;
    height: 100vh;
    max-width: 550px;
    margin: 0 auto;
    position: relative;
  }
  .my-swipe{
    width: 100vw;
    height: 100vh;
  }
  .product_swiper{
    width: 100vw;
    height: 100vh;
  }
  .icon_play {
    position: absolute;
    top: 44%;
    right: 0;
    left: 0;
    bottom: auto;
    margin: auto;
    z-index: 999;
    height: 60px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
  }
</style>
